<template>
  <div style="padding: 16px;">
      <div class="table-head">
          <div style="flex: 1;">
              <el-button type="primary" @click="events.add()" size="small">新增</el-button>
          </div>
          <div style="flex: 1;">
              <el-input></el-input>
          </div>
          <div style="flex: 1;">

          </div>
      </div>
      <div class="table-body">
          <el-table v-loading="data.loading" :data="data.data" border>
              <el-table-column label="序号" width="70" type="index"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" width="150" label="字典类别" prop="name"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" width="150" label="关键字" prop="key"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="值" prop="value"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="说明" prop="explain"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="子级" prop="count"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="时间" prop="time"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="作者" prop="author"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="修改人" prop="update_author"></el-table-column>
              <el-table-column label="操作" prop="name" width="150">
                  <template #default="scope">
                      <el-button size="small" @click="events.detail(scope.row.id)" type="primary">详情</el-button>

                      <el-popconfirm @confirm="events.del(scope.row.id)" title="确认删除吗？">
                          <template #reference>
                              <el-button v-if="scope.row.count === 0" type="danger" size="small">删除</el-button>

                          </template>
                      </el-popconfirm>

                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="table-foot">

          <el-pagination background size="small" layout="prev, pager, next" :total="data.pages?.total" />

      </div>
  </div>
</template>

<script setup lang="ts">
import { delete_Dictionary_Types, get_Dictionary_Types } from '@/api/dictionary/index';
import router from '@/router';
import { notice } from '@/utils/notice';
import type { Dictionary_Index_Data } from '@/utils/types';
import { reactive, watchEffect } from 'vue';


//选项式api  组合式api

const data = reactive<Dictionary_Index_Data>({
  isFirst: true,
  data: [],
  loading: false,
  key: '',
  pages: {
      page: 1,
      limit: 10,
      total: 0
  }
});

const methods = {
  async bind() {
      data.loading = true;
      const res = await get_Dictionary_Types({
          page: data.pages?.page || 1,
          limit: data.pages?.limit || 10,
          key: data.key || ''
      });
      data.loading = false;
      if (res.code === 0) {
          data.data = res.data.data;
          data.pages!.total = res.data.total;
      }

  }
}

const events = {
  detail(id: string) {
      router.push('/dictionary/detail/' + id);
  },
  async del(id: string) {
      data.loading = true;
      const res = await delete_Dictionary_Types({
          id:id
      });
      data.loading = false;
      notice(res);
      methods.bind();
  },
  add() {
      router.push('/dictionary/add');
  }
}



watchEffect(() => {
  methods.bind();
});


</script>

<style scoped>
.table-head {
  border: 1px solid #eee;
  margin-bottom: 8px;
  padding: 8px;
  display: flex;
  border-radius: 4px;
}

.table-body {
  margin-bottom: 8px;
}
</style>
